<template>
  <div class="ks">
    <div class="top">
      <!-- <van-button type="primary" size="large" color="#7232dd" to="/login"
      >点击登录</van-button
    > -->
      <van-image
        round
        width="80px"
        height="80px"
        fit="cover"
        :src="information.headIcon"
      />
      <div @click="login" v-if="information.userId == 0">立即登录</div>
      <div v-if="information.userId != 0">{{ information.userId }}</div>
    </div>
    <div class="box">
      <div>
        <p>0张</p>
        <p>卖座卷</p>
      </div>
      <div>
        <p>￥0</p>
        <p>余额</p>
      </div>
    </div>
    <van-cell value="" is-link icon="gift-card-o">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <span class="custom-title">电影订单</span>
      </template>
    </van-cell>
    <van-cell value="" is-link icon="balance-pay">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <span class="custom-title">组合红包</span>
      </template>
    </van-cell>

    <van-cell value="" is-link icon="friends-o">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <span class="custom-title">帮助与客服</span>
      </template>
    </van-cell>

    <van-cell value="" is-link icon="setting-o">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <span class="custom-title">设置</span>
      </template>
    </van-cell>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { userInfo } from "../axios/http";
import { UserType } from "../types/index";
const store = useStore();
const information = ref<UserType>({
  userId: 0,
  mobile: "",
  gender: 0,
  headIcon: "",
});
if (store.state.tokey != "") {
  (async () => {
    console.log(store.state.tokey);
    const accd = await userInfo(store.state.tokey as string);
    console.log(accd);
    information.value = accd.data.userinfo;
    console.log(information.value.headIcon);
  })();
}

// 进入登录页面
const router = useRouter();
function login() {
  router.push("/login");
}
</script>
<style scoped lang="scss">
.ks {
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
}
.top {
  width: 100%;
  height: 150px;
  background-image: url(https://assets.maizuo.com/h5/v5/public/app/img/bg.a5bdd690.png);
  display: flex;
  padding-left: 20px;
  box-sizing: border-box;
  align-items: center;
  div {
    color: #fff;
    margin: 10px;
  }
}
.box {
  width: 100%;
  height: 100px;
  display: flex;
  margin-bottom: 20px;
  background-color: #fff;
  justify-content: space-around;
  div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    p {
      padding: 0;
      margin: 3px;
    }
    p:nth-child(2) {
      color: #afb1ae;
    }
  }
}
</style>
